<template>
  <div
    v-for="(item, index) in exptList"
    :key="index"
    class="expt-item"
    :class="{ 'active-item': currentIndex == index }"
  >
    <div class="card-content" @click="exptClick(item, index)">
      <div v-for="citem in column" :key="citem.prop" class="colum">
        <span class="label"> {{ citem.name }}：</span>
        <span>
          <span v-if="citem.prop == 'exptLevel'">
            {{ getLevel(item[citem.prop]) }}
          </span>
          <span v-else-if="citem.prop == 'status'">
            <span
              class="status"
              :style="{
                color:
                  item.status == 0
                    ? '#fff'
                    : item.status == 1
                    ? 'red'
                    : item.status == 2
                    ? '#54E49C'
                    : item.status == 3
                    ? '#FFEF40'
                    : item.status == 4
                    ? '#00FF29'
                    : '',
              }"
            >
              {{ getStatus(item.status) }}
            </span>
            -
            <span> {{ getStatus1(item.status1) }} </span>
          </span>
          <span style="color: #006b82" v-else-if="citem.prop == 'mySeat'">
            <!-- {{ getSeat(item.mySeat) }} -->
            {{ item.mySeat }}
          </span>
          <span v-else> {{ item[citem.prop] }}</span>
        </span>
      </div>
    </div>
    <div class="footer">
      <span v-if="item.status == 0" class="start-expt" @click="startExpt(item)"
        >开始实验</span
      >
      <span
        v-else-if="item.status == 4"
        class="expt-details"
        @click="exptDetails(item)"
        >实验详情</span
      >
      <div v-else class="monitor">
        <span>流程监控</span>
        <span>任务监控</span>
      </div>
      <span class="operation" @click.stop="menuClick(item, index)">...</span>
      <div class="menu" v-if="currentIndex == index && menuIsShow">
        <span @click="update(item)">编辑</span>
        <span @click="exportClick(item)">导出</span>
        <span @click="delExpt(item)">删除</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
import { ExportBriefDataDocx } from "@/utils/exportBriefDataDocx.js";
const props = defineProps({
  exptList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
// 开始实验
const startExpt = (item) => {
  // router.push("/stageMonitio");

  router.push({
    // path: "/stageMonitio",
    // query: item,
    name: "ExptOrganizations",
    state: { data: JSON.stringify(item.id) },
  });
};

const menuIsShow = ref(false);
const column = [
  {
    name: "实验名称",
    prop: "exptName",
  },
  {
    name: "实验编号",
    prop: "exptNum",
  },
  {
    name: "实验级别",
    prop: "exptLevel",
  },
  {
    name: "创建人",
    prop: "creator",
  },
  {
    name: "实验负责人",
    prop: "responsiblePerson",
  },
  {
    name: "创建时间",
    prop: "createTime",
  },
  {
    name: "更新时间",
    prop: "updateTime",
  },
  {
    name: "实验状态",
    prop: "status",
  },
  {
    name: "我的席位",
    prop: "mySeat",
  },
];
// 实验列表
const exptLevelList = [
  {
    name: "战略级",
    id: 0,
    jobContent: [1, 2, 3, 4, 5, 6, 7, 8],
  },
  {
    name: "战役级",
    id: 1,
    jobContent: [1, 2, 3, 4, 6, 8],
  },
  {
    name: "战术级",
    id: 2,
    jobContent: [1, 3, 5, 7, 8],
  },
];
// 获取级别名称
function getLevel(id) {
  let items = exptLevelList.filter((v) => v.id == id);
  if (items && items.length) return items[0].name;
}
// 获取状态名称
const statusList = [
  {
    name: "新建",
    id: 0,
  },
  {
    name: "未启动",
    id: 1,
  },
  {
    name: "已启动",
    id: 2,
  },
  {
    name: "已暂停",
    id: 3,
  },
  {
    name: "已完成",
    id: 4,
  },
];
const statusList1 = [
  {
    name: "规划中",
    id: 0,
  },
  {
    name: "筹划中",
    id: 1,
  },
  {
    name: "推演中",
    id: 2,
  },
];
function getStatus(id) {
  let items = statusList.filter((v) => v.id == id);

  if (items && items.length) return items[0].name;
}
function getStatus1(id) {
  let items = statusList1.filter((v) => v.id == id);

  if (items && items.length) return items[0].name;
}

// 获取席位名称
// 席位列表
const seatList = ref([
  {
    name: "首长席",
    id: 0,
  },
  {
    name: "综合筹划席",
    id: 1,
  },
  {
    name: "辅助筹划席",
    id: 2,
  },
  {
    name: "情报席",
    id: 3,
  },
  {
    name: "综合规划席",
    id: 4,
  },
  {
    name: "辅助规划席",
    id: 5,
  },
  {
    name: "综合战斗管理席",
    id: 6,
  },
  {
    name: "单兵战斗管理席",
    id: 7,
  },
  {
    name: "场景编辑席",
    id: 8,
  },
  {
    name: "导调席",
    id: 9,
  },
  {
    name: "综合评估席",
    id: 10,
  },
]);

function getSeat(id) {
  let items = seatList.value.filter((v) => v.id == id);

  if (items && items.length) return items[0].name;
}

// 点击实验
const currentIndex = ref(0);
let emit = defineEmits(["cardClick", "cardUpdate", "delExpt"]);
const exptClick = (item, index) => {
  currentIndex.value = index;
  menuIsShow.value = false;
  emit("cardClick", item);
};

const menuClick = (item, index) => {
  currentIndex.value = index;
  menuIsShow.value = true;
};

// 编辑
const update = (item) => {
  console.log(item);
  emit("cardUpdate", item);
  menuIsShow.value = false;
};
// 导出
const exportClick = (item) => {
  ExportBriefDataDocx("/text.docx", item, "实验导出.docx");
  menuIsShow.value = false;
};
// 删除
const delExpt = (item) => {
  emit("delExpt", item);
  menuIsShow.value = false;
};
// 实验详情

const exptDetails = (item) => {

  router.push({

    name: "ExptDetails",
    state: { data: JSON.stringify(item.id) },
  });
};

onMounted(() => {});
</script>
<style scoped lang="scss">
.expt-item {
  flex-shrink: 0;
  width: 250px;
  height: 300px;
  background: #454b52;
  margin: 10px 10px 10px 0;
  cursor: pointer;
  .title {
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: #009688;
    span {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .card-content {
    font-size: 14px;
    // height: calc(100% - 60px);
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .colum {
      .label {
        display: inline-block;
        width: 90px;
        text-align: right;
        color: #96a5a5;
      }
      .status {
        color: red;
      }
    }
  }
  .footer {
    position: relative;
    height: 30px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 14px;
    .start-expt,
    .expt-details {
      display: inline-block;
      width: 70%;
      height: 30px;
      line-height: 30px;
      background: #1facac;
    }
    .monitor {
      width: 70%;
      display: flex;

      justify-content: space-between;
      span {
        display: inline-block;
        width: 49.5%;
        line-height: 30px;
        background: #1facac;
      }
    }

    .operation {
      display: inline-block;
      width: 29%;
      height: 30px;
      line-height: 20px;
      background: #1facac;
      font-size: 18px;
      font-weight: bold;
    }
    .menu {
      width: 80px;
      height: 80px;
      background: #ffffff;
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: space-around;
      color: #000;
      right: 0;
      bottom: -80px;
      flex-direction: column;
      span {
        display: inline-block;
        width: 90%;
        background: #e4e7ed;
      }
    }
  }
}
.active-item {
  background: #fff;
  background: #609ab3;
  background: #2d4c4c;
}
</style>
